<template>
  <!--
  查：
    1：定义查询 api
    2: 导入查询 api
    3: 调用api获取数据
    4：存储渲染
    5：与分页建立关联
  增：
    1：创建新增弹框组件
    2：导入注册使用
    3：点击新增打开弹框
    4：完成新增弹框内布局
    5：表单处理
    6：定义导入新增api
    7:点击确定在表单验证通过后调用新增api
    8:调用成功  提示  关闭弹框  清空表单数据与验证  刷新父级列表
  改：
    1：点击修改打开新增弹框
    2：修改标题
    3：回显数据
    4：表单的处理（表单验证调整之类 的）
    5:定义修改api
    6:导入与分场景调用
    7：调用成功：提示  关闭弹框  清空表单数据与验证  刷新父级列表
  删：
    1：点击删除弹出确认框
    2：定义与导入删除api
    3:确认框点击确认调用删除api
    4:调用成功：提示  ，刷新列表（注意点：如果有分页需要考虑删除那些后无那页数据了，页码>1 && 当前页只有一条数据时，页码--）
 -->

  <div class="permission">
    <el-card>
      <div class="top">
        <el-button type="primary" @click="addEvent">添加权限</el-button>
      </div>
    </el-card>
    <el-table :data="list" row-key="id">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="标识" />
      <el-table-column prop="description" label="描述" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="text" @click="addEvent2(row.id)">添加</el-button>
          <el-button type="text" @click="editEvent(row)">编辑</el-button>
          <el-button type="text" @click="delEvent(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增弹框组件 -->
    <Add ref="add" @getData="getData" />
  </div>
</template>
<script>
import { sysPermission, sysPermissionDelete } from '@/api/permission'
import Add from './components/Add.vue'
export default {
  components: {
    Add
  },
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await sysPermission()
      console.table(res.data)
      this.list = this.changeData(res.data, '0')
      console.log('权限列表数据', res)
    },
    // 树形数据转换
    changeData (arr, pid) {
      // 1:找出第一层数据
      // 2:给找出的每条数据加入children=[]
      // 3:将方法改造成可找出任意层数据的方法（将pid设置为变量）
      // 4:item.children=方法(arr,自己的id)
      return arr.filter(item => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
        return false
      })
    },
    // 新增点击事件
    addEvent () {
      this.$refs.add.show = true
      this.$refs.add.form.type = 1
      this.$refs.add.form.pid = '0'
      this.$refs.add.mode = 'add'
    },
    addEvent2 (id) {
      this.$refs.add.show = true
      this.$refs.add.form.type = 2
      this.$refs.add.form.pid = id
      this.$refs.add.mode = 'add'
    },
    // 修改点击
    editEvent (row) {
      this.$refs.add.show = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    },
    // 删除点击
    async delEvent (id) {
      await this.$confirm('您确定删除该条数据吗?', '提示')
      await sysPermissionDelete(id)
      this.$message.success('删除成功')
      this.getData()
    }
  }
}
</script>
<style lang="scss" scoped>
.permission {
  padding: 30px;
  .top {
    text-align: right;
  }
}
</style>
